<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="head">当前留言记录为:0条</h1>
    <ul id="list"></ul>
    <textarea name="" id="text" cols="30" rows="10"></textarea>
    <input type="submit" value="留言">
    <script>
        let text = document.getElementById("text")
        let btn = document.querySelector("input")
        let head = document.getElementById("head")
        let list = document.getElementById("list")

        btn.onclick = function(){
            let lis = document.createElement("li")
            
            lis.innerHTML = `<span>${text.value}</span><span>x</span>`
            list.append(lis)
            console.log(list.children);
            head.innerHTML = `当前留言记录为:${list.children.length}条`
        }
        //shanchu 
        list.onclick = function(e){
            let res = e.target
            if(res.innerHTML === "x"){
                res.parentElement.remove()
            }
            head.innerHTML = `当前留言记录为:${list.children.length}条`
        }
    </script>
</body>
</html>